<template>
  <div class="Confession">
    <navigation image_='0' title="心动告白 为爱守护" :scrollTop="false" :show="true" v-on:getHeight="getHeight($event)" />
    <div class="Beckoning" :style="{marginTop:Height+'px'}">
      <img class="back_img1" src="https://img.xunyinjiaoyou.com/static/activity/Confession/bg3.png" alt="">
      <div class="active_time">
        <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/confession_time_img.png" alt="">
      </div>
      <img class="active_explain" @click="rule_active" src="https://img.xunyinjiaoyou.com/static/activity/Confession/confession_rule_img.png"
        alt="">
      <img class="active_title" src="https://img.xunyinjiaoyou.com/static/activity/Confession/confession_title_img.png" alt="">
      <img class="back_active" src="https://img.xunyinjiaoyou.com/static/activity/Confession/bg1@3x.png" alt="">
      <!-- 邀请 -->
      <div class="invitation" v-if="my_info.invite_user_id">
        <span>{{splice_(my_info.invite_nickname)}}邀请你成为CP</span>
        <div class="refuse" @click="refuse(2)">拒绝</div>
        <div class="receive" @click="refuse(1)">接受</div>
      </div>
      <!-- 组cp -->
      <div :class="my_info.invite_user_id?'my_cp':'my_cp matopcp'">
        <img class="tltle_image" src="https://img.xunyinjiaoyou.com/static/activity/Confession/cp_title_img.png" alt="">
        <div class="describe">
          <div class="relieve" @click="tCpCancel" v-if="my_info.to_user_id">
            <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/heart_frame.png" alt="">
            <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/cp_heart_img.png" alt="">
            <span>解绑</span>
          </div>
          <div class="right_rank">
            <u v-if="my_info.rank=='0'">排名:未上榜</u>
            <u v-else-if="my_info.rank=='-1'">排名:未参与</u>
            <u v-else>排名:{{my_info.rank}}</u>
          </div>
        </div>
        <div class="cp_image">
          <div class="left_image_user">
            <div class="image_border"><img :src="my_info.head_pic" alt=""></div>
            <div class="text_name van-ellipsis">{{my_info.nickname}}</div>
          </div>
          <div class="center_image_user">
            <img class="bacg_bolang" src="https://img.xunyinjiaoyou.com/static/activity/Confession/heart_line_img.png" alt="">
            <div class="luck_Star">
              <img class="bacg_bolang" src="https://img.xunyinjiaoyou.com/static/activity/Confession/heart_img.png" alt="">
              <span class="luck_value">{{value_K(my_info.sweet_charm)}}</span>
              <span class="luck-span">幸运值</span>
            </div>
          </div>
          <div class="right_image_user">
            <div class="image_border">
              <img v-if="my_info.to_user_id" :src="my_info.to_headpic" alt="" @click="open_usrt(my_info.to_user_id)">
              <span v-else @click="change">+</span>
            </div>
            <div class="text_name  van-ellipsis">{{my_info.to_user_id?my_info.to_nickname:"虚位以待"}}</div>
          </div>
        </div>
      </div>
      <!-- 昨日冠军 -->
      <div class="champion">
        <img class="tltle_image" src="https://img.xunyinjiaoyou.com/static/activity/Confession/champion_title_img.png" alt="">
        <div class="ba_star_">
          <div class="top_center">
            <div class="left_image_user">
              <div class="image_border">
                <img v-if="yesterday_top.user_id" :src="yesterday_top.head_pic" alt=""
                  @click="open_usrt(yesterday_top.user_id)">
                <img v-else class="zuowei" src="https://img.xunyinjiaoyou.com/static/activity/Confession/zuowei_img.png" alt="">
              </div>
              <div class="text_name van-ellipsis">{{yesterday_top.user_id?yesterday_top.nickname:'虚位以待'}}</div>
            </div>
            <div class="center_image_user">
              <img class="bacg_bolang" src="https://img.xunyinjiaoyou.com/static/activity/Confession/champion_line_img.png" alt="">
              <img class="bacg_bolang2" src="https://img.xunyinjiaoyou.com/static/activity/Confession/heart1_img.png" alt="">
            </div>
            <div class="right_image_user">
              <div class="image_border">
                <img v-if="yesterday_top.to_user_id" :src="yesterday_top.to_head_pic" alt=""
                  @click="open_usrt(yesterday_top.to_user_id)">
                <img v-else class="zuowei" src="https://img.xunyinjiaoyou.com/static/activity/Confession/zuowei_img.png" alt="">
              </div>
              <div class="text_name  van-ellipsis">{{yesterday_top.to_user_id?yesterday_top.to_nickname:'虚位以待'}}</div>
            </div>

          </div>
          <div class="luck_sta">
            幸运值:{{yesterday_top.charm}}
          </div>
          <div class="btn_anniu" v-if="yesterday_top.prize_status !='0' && yesterday_top.prize_status">
            <span v-if="yesterday_top.prize_status=='1'" @click="OpenHeart">开启心动</span>
            <span v-if="yesterday_top.prize_status=='2'">已开启</span>
          </div>
        </div>

      </div>

      <!-- 排名 -->
      <div class="rank_Beckoning">
        <img class="tltle_image" src="https://img.xunyinjiaoyou.com/static/activity/Confession/list_title_img.png" alt="">
        <img class="tltle_image2" src="https://img.xunyinjiaoyou.com/static/activity/Confession/liat_bg1.png" alt="">
        <div class="center_rank">
          <div class="active_cu">
            <div v-for="item,index in time_days" :key="index" @click="tabtime(item)">
              <img v-if="today2 == item" src="https://img.xunyinjiaoyou.com/static/activity/Confession/date_frame_select.png" alt="">
              <img v-else src="https://img.xunyinjiaoyou.com/static/activity/Confession/date_frame_nor@3x.png" alt="">
              <span>{{item}}</span>
            </div>
          </div>
          <div class="list_koning">
            <div class="list_num" v-for="item,index in list" :key="index">
              <img class="poab_back" v-if="item.rank == '1'" src="https://img.xunyinjiaoyou.com/static/activity/Confession/list_no.png" alt="">
              <img class="poab_back" v-else src="https://img.xunyinjiaoyou.com/static/activity/Confession/list_bg.png" alt="">
              <div class="rank_img_text">
                <img v-if="item.rank == '1'" src="https://img.xunyinjiaoyou.com/static/activity/Confession/list_no.1_icon.png" alt="">
                <span v-else>{{item.rank}}</span>
              </div>
              <div class="header_img_name" @click="open_usrt(item.user_id)">
                <img :src="item.head_pic" alt="">
                <span class="van-ellipsis">{{item.nickname}}</span>
              </div>
              <div class="star_luck">
                <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/list_heart_img.png" alt="">
                <span class="van-ellipsis">幸运值:{{item.charm}}</span>
              </div>
              <div class="header_img_name" @click="open_usrt(item.to_user_id)">
                <img :src="item.to_head_pic" alt="">
                <span class="van-ellipsis">{{item.to_nickname}}</span>
              </div>
            </div>
          </div>
        </div>
        <img class="tltle_image2" src="https://img.xunyinjiaoyou.com/static/activity/Confession/liat_bg3.png" alt="">
      </div>
    </div>
    <van-popup v-model="Popup" round :close-on-click-overlay="overlayclick">
      <div class="popup_model">
        <img class="close_popul" @click="closePopup" src="https://img.xunyinjiaoyou.com/static/activity/Confession/popup_close_icon.png" alt="">
        <div class="description">
          <span class="title_top">规则说明</span>
          <span>1.活动期间,用户在活动页面邀请好友绑定 CP成功后,即可参加本次活动. </span>
          <span>2.每日CP榜第一名可开启心动礼盒,随机 开出价值10000钻-131400钻礼物及靓号; 2-3名赠送专属头像框*7天和千纸鹤进场 特效*7天;4-10名送专属头像框*7天. </span>
          <span>3.如需解除CP,需要5200钻,CP解除绑定后 幸运值将清零。</span>
          <span>4.本次活动所有礼物收入均算入幸运值.</span>
          <span>5.活动最终解释权归声贝所有。</span>
          <span class="title_top2">活动奖励</span>
          <div class="rank-prize">
            <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/rank.png" alt="">
            <span>第1名</span>
          </div>
          <div class="textprize">随机10000钻-131400钻礼物及靓号</div>
          <div class="prizr_list">
            <div class="rank_n1">
              <div class="left_priz">
                <div class="bg_kuang">
                  <img src="http://img.xunyinjiaoyou.com/upload/gift/202111/23/1637661146.png" alt="">
                </div>
                <div class="prize_value">
                  <span> 星愿女神</span>
                  <span>价值10000钻</span>
                </div>
              </div>
              <div class="left_priz">
                <div class="bg_kuang">
                  <img src="http://img.xunyinjiaoyou.com//upload/gift/202108/13/1628839217.png" alt="">
                </div>
                <div class="prize_value">
                  <span>我们结婚啦</span>
                  <span>价值52000钻</span>
                </div>
              </div>

            </div>
            <div class="rank_n1">
              <div class="left_priz">
                <div class="bg_kuang">
                  <img src="http://img.xunyinjiaoyou.com/upload/gift/202202/13/1644713470.png" alt="">
                </div>
                <div class="prize_value">
                  <span>心心相印</span>
                  <span>价值131400钻</span>
                </div>
              </div>
              <div class="left_priz">
                <div class="bg_kuang">
                  <img class="lianghao_img"
                    src="http://img.xunyinjiaoyou.com/upload/gift/202205/16/sweet_perfect_number.png" alt="">
                </div>
                <div class="prize_value">
                  <span>专属靓号</span>
                </div>
              </div>
            </div>
          </div>
          <div class="rank-prize">
            <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/rank.png" alt="">
            <span>第2名-第3名</span>
          </div>
          <div class="prizr_list">
            <div class="rank_n1">
              <div class="left_priz">
                <div class="bg_kuang">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/touxiangkuang.png" alt="">
                </div>
                <div class="prize_value">
                  <span>专属头像框</span>
                  <span>7天</span>
                </div>
              </div>
              <div class="left_priz">
                <div class="bg_kuang">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/jinchang.png" alt="">
                </div>
                <div class="prize_value">
                  <span>千纸鹤进场特效</span>
                  <span>7天</span>
                </div>
              </div>
            </div>
          </div>
          <div class="rank-prize">
            <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/rank.png" alt="">
            <span>第4名-第10名</span>
          </div>
          <div class="prizr_list prizr_list2">
            <div class="rank_n1">
              <div class="left_priz">
                <div class="bg_kuang">
                  <img src="https://img.xunyinjiaoyou.com/static/activity/Confession/touxiangkuang.png" alt="">
                </div>
                <div class="prize_value">
                  <span>专属头像框</span>
                  <span>7天</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="Popup2" round :close-on-click-overlay="overlayclick">
      <div class="gift_prize">
        <img class="gongxi" src="https://img.xunyinjiaoyou.com/static/activity/Confession/popup_title.png" alt="">
        <div class="bg_mode2">
          <img :src="sweetCpLottery.gift_pic" alt="">
        </div>
        <span>{{sweetCpLottery.desc}}</span>
        <div class="btn_determine" @click="Popup2 = false">确认</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast,
    Dialog
  } from "vant";
  import navigation from '../../components/navigation'
  export default {
    data() {
      return {
        sweetCpLottery: {},
        Popup: false,
        Popup2: false,
        isiOS: false,
        today: '',
        today2: '',
        my_info: {}, //我的cp
        yesterday_top: {}, //昨日冠军
        list: [], //实时排名
        Height: 48,
        overlayclick: false, //默认点击遮罩层不关闭弹窗
        time_days: ['5.19', '5.20', '5.21', '5.22', '5.23']
      };
    },
    components: {
      navigation
    },
    created() {
       this.$store.commit("empty");
      this.lucky_chou()
      var u = navigator.userAgent;
      this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (this.isiOS) {
        if (window.webkit) {
          window.webkit.messageHandlers.setStatusBarTheme.postMessage({
            setStatusBarTheme: '0'
          });
        }
      } else {
        app.setStatusBarTheme('0')
      }
    },
    methods: {
      //点击头像进入个人主页
      open_usrt(user) {
        if (window.isiOS) {
          window.webkit.messageHandlers.openProfile.postMessage({
            userId: user,
          });
        } else {
          app.openProfile(user);
        }
      },
      rule_active() {
        this.Popup = true
      },
      change() {
        this.$store.commit("empty");
        this.$store.commit("change", "/Confession");
        this.$router.push("/followFriends");
      },
      tabtime(index) {
        if (index > this.today) {
          return Toast('暂未开放')
        }
        this.today2 = index
        let date = index.split('.');
        date = '2022-0' + date[0] + '-' + date[1]
        let arys = {
          date
        }; //参数
        let url = "/activity/sweetCpRank";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.list = res.data.result.list
          }
        });
      },
      tCpCancel() {
        Dialog.confirm({
            title: "解绑",
            message: "分手将支付5200钻分手费",
            confirmButtonColor: "#0091FF",
            cancelButtonText:"不分了"
          })
          .then(() => {
            this.cpInvite()
          })
          .catch(() => {
            // on cancel
          });
      },
      cpInvite() {
        let arys = {
          toUserId: this.my_info.to_user_id,
        }; //参数
        let url = "/activity/sweetCpCancel";
        this.$.encryption2(arys, url).then((res) => {
          this.lucky_chou()
          Toast(res.data.text)
        });
      },
      refuse(status) {
        let arys = {
          toUserId: this.my_info.invite_user_id,
          status: status,
        }; //参数
        let url = "/activity/sweetCpInviteConfirm";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.lucky_chou()
          }
          Toast(res.data.text)
        });
      },
      getHeight(height) {
        this.Height = height;
      },
      backAciton() {
        if (window.isiOS) {
          window.webkit.messageHandlers.backAction.postMessage({});
        } else {
          app.backAction();
        }
      },
      closePopup() {
        this.Popup = false
      },
      lucky_chou() {
        let arys = {}; //参数
        let url = "/activity/sweetCpIndex";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.my_info = res.data.result.my_info;
            this.yesterday_top = res.data.result.yesterday_top;
            this.list = res.data.result.list;
            const chars = res.data.result.today.split('-');
            this.today = chars[1] * 1 + '.' + chars[2]
            this.today2 = chars[1] * 1 + '.' + chars[2]
          }
        });
      },
      value_K(value) {
        let slice2 = "";
        if (value > 10000) {
          slice2 = value
          slice2 = slice2 / 10000
          return Math.round(slice2 * 10) / 10 + 'w';
        } else {
          return value
        }
      },
      splice_(value) {
        let slice2 = "";
        if (value.length > 6) {
          slice2 = value
          slice2 = slice2.slice(0, 5)
          return slice2 + '...';
        } else {
          return value
        }
      },
      OpenHeart() {
        let arys = {}; //参数
        let url = "/activity/sweetCpLottery";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.Popup2 = true;
            this.sweetCpLottery = res.data.result;
            this.yesterday_top.prize_status = '2';
          } else {
            Toast(res.data.text)
          }
        });
      },
    },
  };
</script>
<style scoped lang="less">
  @auto: 0 auto;

  .px (@px, @attr: width) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .fs (@px, @attr: font-size) {
    @vw: (unit(round((@px / 8.28) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .Confession {
    width: 100vw;
    overflow: hidden;
  }

  .Beckoning {
    width: 100vw;
    // .px(3500, height);
    position: relative;
    display: flex;
    // background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/bg1@3x.png');
    // background-size: contain;
    flex-direction: column;
    align-items: center;

    .rank_Beckoning {
      position: relative;
      .px(72, margin-top);
      .px(30, margin-bottom);
      .px(828);
      display: flex;
      flex-direction: column;
      align-items: center;

      .tltle_image {
        .px(446);
        .px(102, height);
        position: absolute;
        .px(-24, top);
        z-index: 10;
      }

      .tltle_image2 {
        .px(828);
        .px(50, height);
        margin: @auto;
      }

      .center_rank {
        .px(828);
        margin: @auto;
        background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/liat_bg2.png');
        background-size: contain;

        .active_cu {
          .px(700);
          .px(64, height);
          .px(48, margin-top);
          .px(44, margin-bottom);
          .px(118, margin-left);
          display: flex;

          >div {
            .px(150);
            .px(64, height);
            .px(-28, margin-left);
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            img {
              width: 100%;
              position: absolute;
            }

            span {
              .fs(30);
              font-family: PingFang SC;
              font-weight: bold;
              color: #FFFFFF;
              z-index: 2;
            }
          }
        }

        .list_koning {
          .px(756);
          margin: @auto;
          .px(8, margin-bottom);

          >.list_num {
            .px(756);
            .px(190, height);
            .px(18, margin-top);
            display: flex;
            align-items: center;
            position: relative;

            .poab_back {
              position: absolute;
              .px(756);
              z-index: 0;
            }

            .rank_img_text {
              .px(52);
              .px(52, height);
              .px(26, margin-left);
              text-align: center;
              z-index: 0;

              img {
                width: 100%;
              }

              span {
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFEFE;
                .fs(34);
              }
            }

            .header_img_name {
              display: flex;
              flex-direction: column;
              align-items: center;
              height: 100%;
              z-index: 1;
              .px(190);


              img {
                .px(100);
                .px(100, height);
                .px(20, margin-top);
                .px(14, margin-bottom);
                border-radius: 50%;
                flex-shrink: 0;
              }

              span {
                .px(200);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFEFE;
                .fs(28);
                text-align: center;
              }
            }

            .star_luck {
              .px(256);
              display: flex;
              flex-direction: column;
              height: 100%;
              // .px(54, margin-left);
              // .px(50, margin-right);
              z-index: 1;

              img {
                .px(256);
                .px(90, height);
                .px(36, padding-top);

              }

              span {
                .px(14, padding-top);
                font-family: PingFang SC;
                font-weight: 400;
                color: #FFFEFE;
                .fs(28);
                text-align: center;
              }
            }
          }
        }
      }
    }

    .champion {
      position: relative;
      .px(60, margin-top);
      .px(828);
      .px(708, height);
      background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/champion_frame.png') no-repeat;
      background-size: contain;
      display: flex;
      justify-content: center;

      .tltle_image {
        .px(446);
        .px(102, height);
        position: absolute;
        .px(-24, top);
      }

      .ba_star_ {
        width: 100%;
        .px(586, height);
        .px(88, margin-top);
        background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/champion_heart_img.png') no-repeat;
        background-size: contain;
        display: flex;
        flex-direction: column;
        align-items: center;

        .top_center {
          display: flex;
          width: 54%;
          height: 100%;
          margin: @auto;
          .px(156, margin-top);
          .px(180, height);

          .left_image_user {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            .px(130);
            z-index: 10;

            >.image_border {
              .px(130);
              .px(130, height);
              border-radius: 50%;
              border: 1px solid #ffffff;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #FF6881;
              flex-shrink: 0;

              img {
                .px(130);
                .px(130, height);
              }

              .zuowei {
                width: 48%;
                height: 48%;
              }
            }

            .text_name {
              font-family: PingFang SC;
              font-weight: bold;
              color: #FFFFFF;
              .fs(30);
              text-align: center
            }
          }

          .right_image_user {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            .px(130);
            z-index: 10;

            >.image_border {
              .px(130);
              .px(130, height);
              border-radius: 50%;
              border: 1px solid #ffffff;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
              background: #FF6881;
               flex-shrink: 0;


              img {
                .px(130);
                .px(130, height);
              }

              .zuowei {
                width: 48%;
                height: 48%;
              }
            }

            .text_name {
              font-family: PingFang SC;
              font-weight: bold;
              color: #FFFFFF;
              .fs(30);
              text-align: center
            }
          }

          .center_image_user {
            display: flex;
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow-x: clip;

            .bacg_bolang {
              .px(224);
              position: absolute;
            }

            .bacg_bolang2 {
              position: absolute;
              .px(112);
              display: flex;
              flex-shrink: 0;
            }
          }

        }

        .luck_sta {
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: #FFFFFF;
          .fs(34);
          .px(26, margin-top);
        }

        .btn_anniu {
          .px(234);
          .px(88, height);
          .px(28, margin-top);
          background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/champion_xindong_btn.png') no-repeat;
          background-size: contain;
          text-align: center;

          span {
            text-align: center;
            .px(88, line-height);
            text-shadow: 0px 1px 5px #2C36FC;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #FFFFFF;
            .fs(38);
          }
        }
      }
    }

    .matopcp {
      .px(798, margin-top);
    }

    .invitation {
      position: relative;
      margin: @auto;
      .px(798, margin-top);
      .px(50, margin-bottom);
      .px(800);
      .px(80, height);
      .px(10, border-radius);
      background: #F666F9;
      display: flex;
      align-items: center;
      position: relative;

      span {
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        .fs(30);
        .px(46, margin-left)
      }

      .refuse {
        .px(130);
        .px(60, height);
        .px(30, border-radius);
        .px(60, line-height);

        background: #FCB1FE;
        font-family: PingFang SC;
        font-weight: 500;
        color: #FBFBFC;
        .fs(32);
        text-align: center;
        position: absolute;
        .px(208, right)
      }

      .receive {
        font-family: PingFang SC;
        font-weight: 500;
        color: #FDFBFC;
        .px(60, line-height);
        text-align: center;
        .fs(32);
        .px(130);
        .px(57, height);
        .px(30, border-radius);
        background: linear-gradient(0deg, #F9DE82 1%, #FF6881 100%);
        position: absolute;
        .px(28, right);
        border: 1.5px solid #fffcd6;
      }
    }

    .my_cp {
      position: relative;
      .px(828);
      .px(532, height);
      background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/cp_frame.png') no-repeat;
      background-size: contain;
      display: flex;
      flex-direction: column;
      align-items: center;

      .describe {
        width: 74%;
        .px(50, height);
        display: flex;
        position: relative;
        justify-content: space-between;
        .px(86, margin-top);

        .relieve {
          .px(132);
          .px(44, height);
          display: flex;
          justify-content: center;
          position: relative;
          align-items: center;

          img:nth-of-type(1) {
            position: absolute;
            .px(132);
          }

          img:nth-of-type(2) {
            .px(34);
            .px(26, height);
            .px(6, margin-right)
          }

          span {
            .fs(28);
            color: #FB58ED;
            .px(50, line-height);
            font-family: PingFang SC;
            font-weight: bold;
          }
        }

        .right_rank {
          font-family: PingFang SC;
          font-weight: bold;
          text-decoration: underline;
          color: #FFFFFF;
          position: absolute;
          right: 0px;
          .fs(28);
          display: flex;
          align-items: center;


        }
      }

      .cp_image {
        display: flex;
        width: 74%;
        .px(180, height);
        .px(32, margin-top);
        display: flex;
        justify-content: space-between;

        .left_image_user {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          .px(130);
          z-index: 10;

          >.image_border {
            .px(130);
            .px(130, height);
            border-radius: 50%;
            border: 1px solid #fff;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
             flex-shrink: 0;

            img {
              .px(130);
              .px(130, height);
            }

          }

          .text_name {
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            .fs(30);
            text-align: center
          }
        }

        .right_image_user {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          .px(130);
          z-index: 10;

          >.image_border {
            .px(130);
            .px(130, height);
            border-radius: 50%;
            border: 1px solid #ffffff;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #FF6881;
             flex-shrink: 0;


            img {
              .px(130);
              .px(130, height);
            }

            span {
              .fs(90);
              font-family: Adobe Heiti Std;
              font-weight: normal;
              color: #FAF7F7;
            }

          }

          .text_name {
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            .fs(30);
            text-align: center
          }
        }

        .center_image_user {
          display: flex;
          flex: 1;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow-x: clip;

          .bacg_bolang {
            width: 110%;
            position: absolute;
          }

          .luck_Star {
            .px(148);
            .px(131, height);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            img {
              width: 100%;
            }

            .luck_value {
              position: absolute;
              .fs(34);
              font-family: PingFang SC;
              font-weight: bold;
              color: #FFFFFF;
            }

            .luck-span {
              font-family: PingFang SC;
              font-weight: bold;
              color: #FF348F;
              .fs(34);
              position: absolute;
              .px(-50, bottom)
            }
          }
        }
      }

      .tltle_image {
        .px(446);
        .px(102, height);
        position: absolute;
        .px(-24, top);
      }
    }

    .back_img1 {
      position: absolute;
      width: 100vw;
      .px(1000, height);
    }

    .active_time {
      position: absolute;
      .px(538);
      .px(76, height);
      .px(20, top);

      img {
        width: 100%;
      }
    }

    .active_explain {
      position: absolute;
      .px(192);
      .px(70, height);
      .px(0, right);
      .px(160, top);
    }

    .active_title {
      position: absolute;
      .px(684);
      .px(404, height);
      .px(368, top);
    }

    .back_active {
      position: absolute;
      width: 100vw;
      .px(1000, top);
    }
  }

  .popup_model {
    .px(594);
    .px(788, height);
    background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/popup_rule_img.png') no-repeat;
    background-size: contain;
    position: relative;
    display: flex;
    align-items: flex-end;

    .close_popul {
      position: absolute;
      .px(-100, top);
      .px(0, right);
      .px(56);
      .px(56, height);
      z-index: 10;
    }

    .description {
      .px(521);
      margin: @auto;
      height: 84%;
      .px(20, margin-bottom);
      overflow-y: scroll;

      >span {
        .fs(28);
        font-family: PingFang SC;
        font-weight: 400;
        color: #010101;
        display: block;
        .px(20, padding-top);
        .px(40, line-height);
      }

      >.title_top {
        font-family: PingFang SC;
        font-weight: 400;
        .fs(30);
        color: #000000;
        .px(0, padding-top);

      }

      .title_top2 {
        font-family: PingFang SC;
        font-weight: 400;
        .fs(30);
        color: #000000;
        .px(14, margin-bottom);
        .px(35, padding-top);
      }

      .rank-prize {
        .px(366);
        .px(68, height);
        position: relative;
        margin: @auto;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          .px(366);
          .px(68, height);
          position: absolute;
          z-index: 1;
        }

        span {
          z-index: 10;
          text-align: center;
          .px(68, line-height);
          .fs(28);
          font-family: PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
        }
      }

      .textprize {
        width: 100%;
        .px(44, height);
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang SC;
        font-weight: 400;
        color: #010101;
        .fs(26);
      }



      .prizr_list {
        width: 100%;
        display: flex;
        flex-direction: column;
        .px(44, margin-bottom);

        .rank_n1 {
          display: flex;
          justify-content: space-between;

          .left_priz {
            .px(240);
            .px(330, height);

            .bg_kuang {
              .px(240);
              .px(248, height);
              background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/gift_frame.png') no-repeat;
              background-size: cover;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                .px(166);
                .px(166, height);
              }

              .lianghao_img {
                .px(118);
                .px(138, height);
              }

            }

            .prize_value {
              display: flex;
              flex-direction: column;
              .px(100, height);
              justify-content: center;

              span {
                font-family: PingFang SC;
                font-weight: 400;
                color: #010101;
                .fs(28);
                text-align: center;
                .px(40, line-height);
              }
            }
          }
        }
      }

      .prizr_list2 .rank_n1 {
        display: flex;
        justify-content: center;
      }
    }
  }

  .gift_prize {
    .px(500);
    display: flex;
    flex-direction: column;
    align-items: center;

    .btn_determine {
      .px(202);
      .px(102, height);
      .px(102, line-height);
      background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/popup_ok_btn.png') no-repeat;
      background-size: cover;
      .px(48, margin-top);
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #FFFFFF;
      .fs(40);
      text-align: center;

    }

    .gongxi {
      .px(442);
      .px(174, height);
    }

    .bg_mode2 {
      .px(302);
      .px(302, height);
      .px(36, margin-top);
      .px(20, margin-bottom);
      background: url('https://img.xunyinjiaoyou.com/static/activity/Confession/popup_gift_frame.png') no-repeat;
      background-size: cover;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        .px(150);
      }
    }

    >span {
      .fs(30);
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
    }

  }

  /deep/ .van-popup {
    overflow-y: initial;
    background: #00000000;
  }
  img{
    flex-shrink: 0;
  }
</style>